﻿@namespace BlazorDemo.Pages.CaseViews
@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2><DemoNavLink Link="TagBox#CustomTags" />Custom Tags</h2>
    <p>
        In this demo, the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2">TagBox</a> supports custom tags that are not stored in a bound data source
        (the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2.AllowCustomTags">AllowCustomTags</a> property is set to <b>true</b>).
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Type a value and press Enter"/>
    </div>
    <div class="card-body mw-480">
        <DxTagBox Data="@Cities"
                  NullText="Select city..."
                  TData="string"
                  TValue="string"
                  AllowCustomTags="true"
                  @bind-Tags="@Tags"
                  ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                  SizeMode="SizeMode">
        </DxTagBox>
    </div>
</div>

<CodeSnippet_Editor_TagBox_AllowCustomTags/>

@code {
    IEnumerable<string> Cities { get; set; } = new List<string>() {
        "London",
        "Berlin",
        "Paris",
    };

    IEnumerable<string> Tags { get; set; } = new List<string>() {
        "London",
        "New York"
    };
}
